import React, { Component } from "react";
import PropTypes from "prop-types";
// import axios from "axios";
// import classnames from "classnames";
// connect：用于从ui组件生成容器组件，将两种方法连起来
// provider：可以让组件及子组件拿到state
import { connect } from "react-redux";
import { registerUser } from "../../actions/authActions";
import { withRouter } from "react-router-dom";
import TextFiledGroup from "../../common/TextFiledGroup.jsx";

class Register extends Component {
  constructor(props) {
    super(props);

    this.state = {
      name: "",
      email: "",
      password: "",
      password2: "",
      errors: {}
    };
  }
  onChange = e => {
    this.setState({
      [e.target.name]: e.target.value
    });
  };
  onSubmit = e => {
    e.preventDefault();
    const newUser = {
      name: this.state.name,
      email: this.state.email,
      password: this.state.password,
      password2: this.state.password2
    };
    //调用action
    this.props.registerUser(newUser, this.props.history);
  };
  componentDidMount() {
    if (this.props.auth.isAuthenticated) {
      this.props.history.push("/dashboard");
    } else {
    }
  }
  UNSAFE_componentWillReceiveProps(nexProps) {
    if (nexProps.errors) {
      this.setState({
        errors: nexProps.errors
      });
    }
  }
  render() {
    // const { errors } = this.state;
    // const { user } = this.props.auth;
    return (
      <div className="register">
        <div className="container">
          <div className="row">
            <div className="col-md-8 m-auto">
              <h1 className="display-4 text-center">注册</h1>
              <p className="lead text-center">创建新的账户</p>
              <form onSubmit={this.onSubmit}>
                <TextFiledGroup
                  type="text"
                  onChange={this.onChange}
                  placeholder="用户名"
                  name="name"
                  value={this.state.name}
                ></TextFiledGroup>

                <TextFiledGroup
                  type="email"
                  onChange={this.onChange}
                  placeholder="邮箱地址"
                  name="email"
                  value={this.state.email}
                  info="我们使用了Gravatar全球公认头像，如果需要有头像显示，请使用在Gravatar上注册的邮箱"
                ></TextFiledGroup>

                <TextFiledGroup
                  type="password"
                  onChange={this.onChange}
                  placeholder="密码"
                  name="password"
                  value={this.state.password}
                ></TextFiledGroup>

                <TextFiledGroup
                  type="password"
                  onChange={this.onChange}
                  placeholder="确认密码"
                  name="password2"
                  value={this.state.password2}
                ></TextFiledGroup>

                <input type="submit" className="btn btn-info btn-block mt-4" />
              </form>
            </div>
          </div>
        </div>
      </div>
    );
  }
}
Register.propTypes = {
  registerUser: PropTypes.func.isRequired,
  auth: PropTypes.object.isRequired,
  errors: PropTypes.object.isRequired
};

//将状态映射为属性
const mapStateToProps = state => ({
  auth: state.auth,
  errors: state.errors
});

export default connect(mapStateToProps, { registerUser })(withRouter(Register));
